<template>
  <el-dialog v-model="changePasswordDialogVisible" title="修改密码">
    <el-input v-model="changedPasswd"></el-input>
    <el-button type="primary" @click="changePasswd">修改</el-button>
  </el-dialog>

  <div class="row">
    <div class="col-md-12">
      <h1 class="page-header">
        学生管理 <small></small>
        <el-button type="primary" size="large" @click="jumpToByName('studentaddByExcel')"  class="float-right" circle>
          <el-icon :size="20" style="vertical-align: middle;">
            <Plus />
          </el-icon>
        </el-button>
      </h1>

    </div>
  </div>
  <el-table :data="studentData" style="width: 100%">
    <el-table-column prop="StuNum" label="学号" width="180"/>
    <el-table-column prop="StuName" label="姓名" width="180"/>
    <el-table-column prop="StuPwd" label="密码" width="180"/>
    <el-table-column width="300">
      <template #header>

        <span class="w-2/5">班级:</span>
        <el-select class="w-3/5" @change="changeClassSel" v-model="class_sel" placeholder="选择班级">

          <el-option
              v-for="item in classList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          >
          </el-option>
        </el-select>


      </template>
      <template #default="scope">
        {{scope.row.StuClass}}
      </template>
    </el-table-column>
    <el-table-column width="300">
      <template #header>
      </template>
      <template #default="scope">
        <el-button class="w-2/5" type="primary" @click="delStu(scope.row.ID)">删除</el-button>
        <el-button class="w-2/5" type="primary" @click="ShowChangePasswdDialog(scope.row.ID)">修改密码</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
      v-model:currentPage="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="10"
      layout="sizes, prev, pager, next, jumper"
      :total="count"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
  >
  </el-pagination>
</template>

<script>
import axios from "axios";
import {Plus} from "@element-plus/icons-vue";
import {ElMessage} from "element-plus";
export default {
  name: "studentShow",
  components: {Plus},
  created() {
    console.log("stu")
    axios.get("/api/teacher/getClassList").then((res)=>{
      if (res.status===200){
        this.classList = res.data
        this.class_sel = ''
      }
    })
    this.setStuData(10,1)
  },
  data() {
    return {
      changedPasswd:'',
      changePasswordDialogVisible:false,
      changePasswordStuId:'',
      class_sel:'',
      classList:[
        {
          value: 'Option1',
          label: 'Option1',
        },
        {
          value: 'Option2',
          label: 'Option2',
        },
          ],
      count:0,
      currentPage:1,
      currentPageSize:10,
      studentData: [
        {
          "ID": "1467655631769964544",
          "CreatedAt": "2021-12-06T08:42:24.999+08:00",
          "UpdatedAt": "2022-01-01T21:49:23.491+08:00",
          "DeletedAt": null,
          "StuName": "马韬循",
          "StuNum": "32109193",
          "StuPwd": "123456",
          "StuClass": "0",
          "StuAva": ""
        }
      ]
    }
  },
  methods: {
    changePasswd(){
      axios.get('/api/teacher/ChangeStuPasswd?id='+this.changePasswordStuId+'&pwd='+this.changedPasswd).then((res)=>{
        if (res.status===200){
          ElMessage.success("修改成功")
        }
        this.changePasswordDialogVisible=false
        if (this.class_sel!==''){
          this.changeClassSel(this.class_sel)
        }else {
          this.setStuData(10,1)
        }
      })
    },
    ShowChangePasswdDialog(id){
      this.changePasswordStuId=id
      this.changePasswordDialogVisible=true
    },
    delStu(id){
      axios.get('/api/teacher/DelStudentById?id='+id).then((res)=>{
        if (res.status===200){
          ElMessage.success({
            message:'删除成功'
          })
          if (this.class_sel!==''){
            this.changeClassSel(this.class_sel)
          }else {
            this.setStuData(10,1)
          }
        }
      })
    },
    changeClassSel(val){
      axios.get('/api/teacher/PageStudentByClass',{
        params:{
          pageSize:this.currentPageSize,
          page:this.currentPage,
          class:val
        }
      }).then((res)=>{
        this.studentData = res.data.stuList
        this.count = res.data.count
      })
    },
    handleSizeChange(size){
      this.currentPageSize = size
      this.setStuData()
    },
    handleCurrentChange(page){
      this.currentPage = page
      this.setStuData()
    },
    jumpToByName: function (name) {
      console.log("wda")
      this.$router.push({name: name})
    },
    setStuData(){
      axios.get('/api/teacher/getStudentList?pageSize='+this.currentPageSize+'&page='+this.currentPage).then((res)=>{
        this.studentData = res.data.stuList
        this.count = res.data.count

      })
    }
  }
}
</script>

<style scoped>

</style>